<template>
  <div>
    <el-table ref="table" :data="list" style="width: 100%;margin-top:30px;" border="border">
      <!-- Sequence -->
      <el-table-column align="center" label="Sequence" min-width="90" fixed>
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- Name -->
      <el-table-column align="center" label="Name" min-width="95">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <!-- Intro -->
      <el-table-column align="center" label="Intro" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.intro }}
        </template>
      </el-table-column>
      <!-- SelectedNum -->
      <el-table-column align="center" label="SelectedNum" min-width="85">
        <template slot-scope="scope">
          {{ scope.row.selectedNum }}
        </template>
      </el-table-column>
      <!-- Operation -->
      <el-table-column align="center" label="Operations" min-width="200" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="Click the button will choose" placement="top">
            <el-button type="success" icon="el-icon-first-aid-kit" size="mini" @click="handleChoose(scope)">
              Choose
            </el-button>
          </el-tooltip>
          <el-tooltip content="Click the button will dislike" placement="top">
            <el-button type="warning" icon="el-icon-first-aid-kit" size="mini" @click="handleDislike(scope)">
              Dislike
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'RecommendDisplay',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleChoose({ row }) {
      this.$emit('choose', row.uid)
    },
    handleDislike({ row }) {
      this.$emit('dislike', row.uid)
    }
  }
}
</script>

<style scoped>

</style>
